import katex from 'katex'
import 'katex/dist/katex.min.css'

/**
 * 渲染单个公式元素
 * @param {HTMLElement} element - 包含公式数据的元素
 */
function renderFormulaElement(element) {
  const formula = element.getAttribute('data-value')
  if (!formula) return

  try {
    // 强制设置为行内模式，忽略 data-w-e-is-inline 属性
    const displayMode = false
    katex.render(formula, element, {
      throwOnError: false,
      displayMode, // 总是使用行内模式
      output: 'html',
      strict: false
    })

    // 添加行内样式类
    element.classList.add('inline-formula')
  } catch (e) {
    console.error('公式渲染失败:', e)
    element.innerHTML = `<span style="color:red">公式渲染错误: ${formula}</span>`
  }
}

/**
 * 渲染HTML字符串中的所有公式
 * @param {string} html - 包含公式的HTML字符串
 * @returns {string} 处理后的HTML字符串
 */
export function renderFormulasInHtml(html) {
  if (!html) return html

  // 创建一个临时div来解析HTML
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = html

  // 查找所有公式元素
  const formulaElements = tempDiv.querySelectorAll('span[data-w-e-type="formula"]')
  formulaElements.forEach(renderFormulaElement)

  return tempDiv.innerHTML
}

/**
 * 渲染DOM节点中的所有公式
 * @param {HTMLElement} element - DOM节点
 */
export function renderFormulasInElement(element) {
  if (!element) return

  const formulaElements = element.querySelectorAll('span[data-w-e-type="formula"]')
  formulaElements.forEach(renderFormulaElement)
}
